* {
    font-size: 10px;
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-top: 10%;
}
.progress-bar {
    display: flex;
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.5rem;
    background-color: black;
}

.progress-time {
    width: 3rem;
    height: 100%;
    color: #f4f3f2;
}

.progress-time:first-child {
    margin-right: .5rem;
}

.progress-time:last-child {
    margin-left: .5rem;
}

.progress-controls {
    display: flex;
    position: relative;
    align-items: center;
    flex: 1;
    height: 4rem;
    line-height: 4rem;
}

.progress-controls .bar {
    width: 100%;
    height: .2rem;
    border-radius: .1rem;
    background-color: #f4f3f2;
}

.progress-controls .dot-button {
    position: absolute;
    display: flex;
    align-items: center;
    height: 100%;
    width: 4rem;
    border: .1rem solid #fff;
    top: 0;
    left: -2rem;
    justify-content: center;
    z-index: 100;
}
.curbar {
    position: absolute;
    width: 0;
    height: .2rem;
    left: 0;
    background-color: tomato;
    border-radius: .1rem;
    z-index: 50;
    transition: height linear 100ms;
}
.dot-button .dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #fff;
    transition: all linear 300ms;
}
.dot-button.focus .dot {
    width: 1.5rem;
    height: 1.5rem;
    transition: all linear 100ms;
}

.dot-button.focus + .curbar {
    height: .4rem;
    transition: height linear 100ms;
}

.circle-progress {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 1rem solid #dc6e6e;
    border-left: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
}

.circle-progress_wrapper{
    width: 20rem;
    height: 20rem;
    margin: 5rem auto;
    position: relative;
    border: 0.1rem solid #ddd;
}
.slider-container {
    width: 50rem;
    height: 10rem;
    line-height: 5rem;
    position: relative;
    background-color: bisque;
    border: .5rem solid #ccc;
    overflow-x: auto;
}
.slider-container::-webkit-scrollbar {
    display: none;
}

.slider-container .slider-entity {
    display: flex;
    align-items: center;
    left: 0;
    height: 100%;
    position: absolute;
    transition: left ease-in 500ms;
}

.slider-container .slider-entity .item-wrapper {
    width: 10rem;
    height: 4rem;
    padding: 0 1rem;
}
.content {
    width: 100%;
    height: 100%;
    background-color: #fff;
}